<template>
    <div class="content">
      <div class="w100 haed bbg pr">
            <img @click="getBack" class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png">
            <p class="fz37 cfff hpd tc">发放优惠券</p>
        </div>
        <div class="pr brs main" :model="form" ref="form" label-width="230rem">
          <div>
            <p>优惠券名称</p>
            <input class="w460" type="text" v-model="form.discountsName ">
          </div>
          <div>
            <p>优惠券类型</p>
            <div>
              <el-radio v-model="form.discountsType " label="0">满减券</el-radio>
              <el-radio v-model="form.discountsType " label="1">打折券</el-radio>
            </div>
          </div>
          <div style="padding-left: 10rem;height: 65rem;align-items: center;">
            <p></p>
            <div v-if="fullSub" style="padding: 0;font-size: 24rem;color: #333;">
              满
              <input style="width: 127rem;padding: 0;border: none;border-bottom: 1rem solid #333;border-radius: 0;height: 32rem;text-align: center;outline: none;" v-model="form.amountCondition" type="number">
              元减
              <input style="width: 127rem;padding: 0;border: none;border-bottom: 1rem solid #333;border-radius: 0;height: 32rem;text-align: center;outline: none;" v-model="form.discounts" type="number">元
            </div>
            <div v-else style="padding: 0;font-size: 24rem;color: #333;">
              打<input style="width: 127rem;padding: 0;border: none;border-bottom: 1rem solid #333;border-radius: 0;height: 32rem;text-align: center;outline: none;" v-model="form.discounts" type="number">折
            </div>
          </div>
          <div>
            <p>发放开始时间</p>
            <div class="pr" style="padding: 0;">
              <input class="w280" type="text" placeholder="2023-03-18" :value="form.startDate" @focus="show = true,onPitch='1'">
              <Calendar v-model="show" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" />
              <img src="../../assets/img/coupon/icon-1.png" alt="">
            </div>
          </div>
          <div>
            <p>发放结束时间</p>
            <div class="pr" style="padding: 0;">
              <input class="w280" type="text" :value="form.endDate" @focus="show = true,onPitch='2'" placeholder="2023-03-18">
              <img src="../../assets/img/coupon/icon-1.png" alt="">
            </div>
          </div>
          <div>
            <p>投入数量</p>
            <div class="pr" style="padding: 0;font-size: 24rem;color: #333;align-items: center;">
              <input class="w140" style="margin-right: 15rem;" type="text" v-model="form.discountsNumber"> 张
            </div>
          </div>
          <div>
            <p>每人限领</p>
            <div class="pr" style="padding: 0;font-size: 24rem;color: #333;align-items: center;">
              <input class="w140" style="margin-right: 15rem;" type="text" v-model="form.limiting "> 张
            </div>
          </div>
          <div>
            <p>使用有效期</p>
            <div style="padding: 0;">
              <div class="pr" style="padding: 0;font-size: 24rem;color: #333;align-items: center;">
                <input class="w178" style="margin-right: 15rem;" placeholder="开始时间" type="text" :value="form.startTime" @focus="show = true,onPitch='3'">
                <img class="img2" src="../../assets/img/coupon/icon-1.png" alt="">
              </div>
              <div class="pr" style="padding: 0;font-size: 24rem;color: #333;align-items: center;">
                <input class="w178" style="margin-right: 15rem;" placeholder="结束时间" type="text"  :value="form.endTime" @focus="show = true,onPitch='4'">
                <img class="img2" src="../../assets/img/coupon/icon-1.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="btn">
          <button @click="submitForm">确定投放</button>
        </div>
    </div>
</template>
<script>
import {addBusinessDiscounts} from '../../api/index'
import { Calendar } from 'vant';
import 'vant/lib/calendar/style';
  export default {
    components: { Calendar},
    data() {
      return {
        form: {
          businessId:1,
          discountsName : '',
          discountsType : '0',
          startDate: '',
          endDate: '',
          amountCondition : '',
          discounts :'',
          discountsNumber : '',
          limiting : '',
          startTime: '',
          endTime: ''
        },
        show: false,
        onPitch:'1',
        minDate: new Date(2023, 0, 1),
        maxDate: new Date(2123, 0, 31),
      };
    },
    computed:{
      //  切换优惠券类型状态
      fullSub(){
        if(this.form.discountsType == '0'){
          this.form.amountCondition  = '';
          this.form.discounts  = '';
          return  true
        }
        this.form.amountCondition  = 0;
        this.form.discounts = '';
        return false
      },
      getData(date){
        var y = date.getFullYear();
        var m = date.getMonth();
        // m = m < 10 ? '0' + m : m
        var d = date.getDate();
        // d = d < 10 ? '0' + d : d
        return y + '.' + m + '.' + d;
      }
    },
    methods: {
      //  确定投放
      submitForm() {
            console.log(this.form);
            //  请求数据
            addBusinessDiscounts(this.form)
            .then(r=>{
              console.log(r);
              // 跳转页面
              this.$router.push('couponCom')
            })
      },
      //  后退
      getBack(){
          this.$router.back();
      },
      // 过滤时间
      formatDate(date) {
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      },
      //  判断点击的是哪个日期
      onConfirm(date){
        this.show = false;
        if(this.onPitch == '1'){
          //  发放开始时间
          this.onStartDate(date)
        }else if(this.onPitch == '2'){
          //  发放结束时间
          this.onEndDate(date) 
        }else if(this.onPitch == '3'){
          //  有效期结束时间
          this.onStartTime(date)
        }else{
          //  有效期结束时间
          this.onEndTime(date)
        }
      },
      //  发放结束时间
      onEndDate(date) {
        this.form.endDate = this.formatDate(date);
      },
      //  发放开始时间
      onStartDate(date) {
        this.form.startDate = this.formatDate(date);
      },
      //  有效期结束时间
      onEndTime(date) {
        console.log(date);
        var date = date;
        date = new Date(date).getTime()+1000*24*60*60-1;
        date = new Date(date);
        this.form.endTime = this.formatDate(date);
      },
      //  有效期开始时间
      onStartTime(date) {
        this.form.startTime = this.formatDate(date);
      },
    },
  }
</script>
<style scoped>
.w460{width: 460rem;}
.w280{width: 280rem;}
.w140{width: 140rem;}
.w178{width: 178rem;}
.w127{width: 127rem;padding: 0;border: none;border-bottom: 1rem solid #333;}

img{height: 19rem;position: absolute;top: 22rem;right: 61rem;}
.img2{height: 19rem;position: absolute;top: 22rem;right: 39rem;}
.main{background-color: #fff;margin: -292rem 20rem 0;padding: 30rem;}
.main div{display: flex;padding: 15rem 0;}
.main div p{font-size: 26rem;line-height: 65rem;width: 185rem;}
.main div input{height: 63rem;border: 2px solid #e8e8e8;border-radius: 32rem;padding: 0 25rem;font-size: 24rem;color: #808080;box-sizing: border-box;}
>>> .el-radio{font-weight: normal;}
>>> .el-radio__label{font-size: 26rem;color: #333;float: left;margin-right: 10rem;}
>>> .el-radio__input.is-checked+.el-radio__label{color: #333;}
>>> .el-radio__inner{content: '';width: 30rem;height: 30rem;background: url('../../assets/img/coupon/icon-2.png') no-repeat;border: 0;background-size: 30rem 30rem;}
>>> .el-radio__inner::after{content: '';width: 30rem;height: 30rem;left: 50%;top: 50%;background: url('../../assets/img/coupon/icon-3.png') no-repeat;background-size: 30rem 30rem;}

.btn{display: flex;justify-content: space-around;}
.btn button{width: 520rem;height: 75rem;background-color: #0762e6;color: #fff;font-size: 26rem;border-radius: 38rem;margin-top: 72rem;border: none;background-repeat: no-repeat;}
</style>